<template>
	<div style="padding-bottom: 50px;">
		<quill-editor class="editor"
			ref="myQuillEditor"
			v-model="content"
			:options="editorOption"
			@blur="onEditorBlur"
			@focus="onEditorFocus"
			@ready="onEditorReady"
			@change="onEditorChange">
		</quill-editor>
		<!-- 隐藏的图片上传 -->
		<el-upload
			class=""
			:action="''"
			:show-file-list="false"
			:before-upload='beforeUpload'
			:http-request='uploadHandle'>
			<el-button type='primary' class="upload-btn"></el-button>
		</el-upload>
	</div>
	
</template>

<script>
	import "quill/dist/quill.core.css";
	import "quill/dist/quill.snow.css";
	import "quill/dist/quill.bubble.css";
	import {quillEditor} from 'vue-quill-editor'
	import {DEFAULT_IMG_UPLOAD_DIR_ID, IMG_UPLOAD_SIZE_LIMIT} from '@const';
	import {toast} from '@u';
	const toolbarOptions = [
	    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
	    ["blockquote", "code-block"], // 引用  代码块
	    [{ header: 1 }, { header: 2 }], // 1、2 级标题
	    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
	    // [{ script: "sub" }, { script: "super" }], // 上标/下标
	    [{ indent: "-1" }, { indent: "+1" }], // 缩进
	    // [{'direction': 'rtl'}],                         // 文本方向
	    [{ size: ["small", false, "large", "huge"] }], // 字体大小
	    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
	    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
	    // [{ font: [] }], // 字体种类
	    [{ align: [] }], // 对齐方式
	    // ["clean"], // 清除文本格式
	    [ "image", ] // 链接"link",、图片、视频"video" 
	];

	export default {
		components: {quillEditor},
		props : {
			value : {
				default: null
			}
		},
		watch : {
			value : {
				handler : function (n) {
					this.content = n;
				},
				immediate : true
			}
		},
		data () {
			let me = this;
			return {
				quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
				content: null,
				editorOption :{
					theme: "snow", // or 'bubble'
					placeholder: "输入点什么...",
					height : '400',
					modules : {
						//工具菜单栏配置
						toolbar: {
							container : toolbarOptions,
							handlers : {
								image: function(value) {
									if (value) {
										document.querySelector('.upload-btn').click()
									} else {
										this.quill.format("image", false);
									}
								},
							}
						}
					}
				},
			}
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quillEditor;
			}
		},
		methods : {
			// 失去焦点
			onEditorBlur(editor) {},
			// 获得焦点
			onEditorFocus(editor) {},
			// 开始
			onEditorReady(editor) {},
			// 值发生变化
			onEditorChange(editor) {
				this.content = editor.html;
				this.$emit('input', this.content)
			},
			 beforeUpload (file) {
                const isLt400kb = file.size / 1024 / 1024 < IMG_UPLOAD_SIZE_LIMIT;
                if (!isLt400kb) {
                    toast('上传图片不得大于400kb', 'error')
                    return isLt400kb
                }
            },
			uploadHandle (file) {
				let formData = new FormData();
                formData.append('file', file.file); //文件
                formData.append('file_type', 'IMAGE'); //文件类型
                formData.append('directory_id', DEFAULT_IMG_UPLOAD_DIR_ID); //上传到服务器的文件夹id

                let loadingInstance = this.$loading({
					fullscreen :true,
					lock :true,
					text : '上传中'
				});

                this.__api.common.upload(formData).then(res => {
                    loadingInstance.close();
					console.log(res);
					//上传成功，插入到编辑器中
					let quill = this.$refs.myQuillEditor.quill;
					let length = quill.getSelection().index;
					quill.insertEmbed(length, "image", res.show_url);
					quill.setSelection(length + 1);
					this.quillUpdateImg = false;
                }).catch(err => {
					toast('上传失败', 'error')
                    loadingInstance.close();
                })
			},
			uploadSuccess(source) {
				let quill = this.$refs.myQuillEditor.quill;
				
				if (Array.isArray(source)) {
					
					source.map(async item => {
						// 获取光标所在位置
						let length = quill.getSelection().index;
						quill.insertEmbed(length, "image", item.show_url);
						quill.setSelection(length + 1);
					})
					
				} else {
					// 获取光标所在位置
					let length = quill.getSelection().index;
					// 插入图片  res.url为服务器返回的图片地址
					quill.insertEmbed(length, "image", source.show_url);
					quill.setSelection(length + 1);
				}
				// loading动画消失
				this.quillUpdateImg = false;
			},
		}
	}
</script>

<style lang="less">
	.upload-btn {
		display: none;
	}
	.editor {
	    line-height: normal !important;
	    height: 400px;
	}
	.ql-snow .ql-tooltip[data-mode=link]::before {
	    content: "请输入链接地址:";
	}
	.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
		border-right: 0px;
		content: '保存';
		padding-right: 0px;
	}
	.ql-snow .ql-tooltip[data-mode=video]::before {
	     content: "请输入视频地址:";
	}
	 
	.ql-snow .ql-picker.ql-size .ql-picker-label::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item::before {
		content: '14px';
	}
	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
	    content: '10px';
	}
	  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
	  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
	    content: '18px';
	  }
	  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
	  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
	    content: '32px';
	  }
	 
	  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
	    content: '文本';
	  }
	  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
	    content: '标题1';
	  }
	  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
	    content: '标题2';
	  }
	  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
	    content: '标题3';
	  }
	  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
	    content: '标题4';
	  }
	  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
	    content: '标题5';
	  }
	  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
	  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
	    content: '标题6';
	  }
	 
	  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
	  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
	    content: '标准字体';
	  }
	  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
	  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
	    content: '衬线字体';
	  }
	  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
	  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
	    content: '等宽字体';
	  }
</style>
